<template>
	<view class="footer rtl">
		<view class="">
			<view class="tip">
				{{$attrs.footerData.totalQuantity}} {{t("itams")}}
				<!-- // , {{t("VAT")}}:150.00 SAR -->
			</view>
			<view class="price">
				{{t("Total")}}: {{$attrs.footerData.totalProductPrice}} SAR
			</view>

		</view>
		<view class="Confrm" @click="Checkout">
			{{t("Check out")}}<uv-icon class="flip" name="arrow-right" color="#fff"></uv-icon>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		useAttrs
	} from "vue"
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	const $attrs = useAttrs();
	const emits = defineEmits(["Checkout"]);
	const Checkout = () => {
		emits("Checkout")
	}
</script>

<style lang="scss" scoped>
	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		background: #127B56;
		color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		font-size: 28rpx;

		.Confrm {
			display: flex;
			align-items: center;
		}

		.tip {
			font-size: 24rpx;
			color: #dddddd;
		}
	}
</style>